<template>
  <div v-loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" label-position="top" ref='form'>
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label='应用编号' prop="appNum">
              <el-select v-model="form.appNum" placeholder="请选择应用">
                <el-option v-for="item in appList" :key="item.value" :label="item.AppNum+'-'+item.AppName" :value="item.AppNum"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="岗位编号" prop="postId">
              <el-input v-model="form.postId" placeholder="请输入岗位编号" name="postId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="岗位名称" prop="postName">
              <el-input v-model="form.postName" placeholder="请输入岗位名称" name="postName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='2' :md='3' class="searchBtnMarginTop">
            <el-button type="primary" icon='el-icon-search' @click="checkPostList" :loading="loading" size='mini'>查询</el-button>
          </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="resetForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_Post_Add')">
          <el-button type="primary" size="mini" @click="CreatePost" icon='el-icon-plus'>新增</el-button>
        </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_Post_Edit')">
          <el-button type="primary" size="mini" icon='el-icon-edit' @click="modPost" :disabled="!checkedPost">修改</el-button>
        </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_Post_Delete')">
          <el-button type="danger" size="mini" @click="delPost" icon='el-icon-delete' :disabled="!checkedPost">删除</el-button>
        </el-col>
        <el-col :lg="2" :md="3">
          <el-dropdown trigger="click" @command="handleCommand">
            <el-button type="primary" size="mini" :disabled="!checkedPost">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="postRole" v-if="btnPermission('Button_Post_Role')">岗位权限分配</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <el-table :data="tableData" ref="table" border class="tableMarginTop" highlight-current-row @selection-change="handleCurrentChange"
        header-row-class-name="tableHeaderClass" style="min-height:390px;">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop="appnum" label="应用编号"></el-table-column>
        <el-table-column prop="postnum" label="岗位编号"></el-table-column>
        <el-table-column prop="postname" label="岗位名称"></el-table-column>
        <el-table-column prop="poststatus" :formatter="dataFormat" label="岗位状态"></el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination :current-page="currentPage" background :page-size="pageSize" layout="total, prev, pager, next, jumper"
          :total="totalRcrdNum" @current-change="changePage">
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <keep-alive>
      <component :is="dialogList.CreatePost" :option="dialogOptions" @refreshTable="checkPostList"></component>
    </keep-alive>
    <keep-alive>
      <component :is="dialogList.userRoleDialog" :option="dialogOptionsUserRole"></component>
    </keep-alive>
    <keep-alive>
      <component :is="dialogList.updatePost" :option="dialogOptionsupdatePost" @refreshTable="checkPostList"></component>
    </keep-alive>
  </div>
</template>

<script>
  import request from "@/common/utils/request";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import CreatePost from "./dialog/CreatePost";
  import updatePost from "./dialog/updatePost";
  import userRoleDialog from "./dialog/postRole"; //
  import InquirePost from "@/message/userManage/post/post-info-query";
  import postDel from "@/message/userManage/post/post-del";
  import appQuery from "@/message/shared/appquery";


  export default {
    name: "user-info-manage",
    data() {
      return {
        postState: {}, //岗位状态
        appList: [], //应用下拉表数据
        form: { //表单数据
          appNum: "",
          postName: "",
          postId: ""
        },

        pageSize: undefined, //表格每页的条数

        currentRow: [], //表格当前选中行
        currentPage: 1, //表格当前页
        tableData: [], //表格 数据
        totalRcrdNum:0,

        loading: false, //loading遮罩
        checkedPost: false, //控制按钮是否可用
        //isDisabledDel: false,

        dialogList: { //指定被渲染组件列表
          CreatePost,
          userRoleDialog,
          updatePost
        },
        dialogOptions: { //创建岗位
          isShow: false,
          active:"",
        },
        dialogOptionsupdatePost: { //修改岗位
          isShow: false,
          appNum: "",
          postNum: "",
          active: ""
        },
        dialogOptionsUserRole: { //用户关联角色
          isShow: false,
          currentRow: []        },
      };
    },
    computed: {
    },
    created() { //初始化下拉框
      this.postState = getGlobalParams.get("postStatus"); //岗位状态初始化
      this.pageSize = getGlobalParams.get("PageSize");
      this.initPage();
      this.checkPostList();
    },
    methods: {
      initPage() {
        let resBody = new appQuery();
        resBody.data.UserNum = this.$store.getters.UserNum;
        request(resBody)
          .then(response => {
            this.appList = response.RspInfo.Result || [];
          })
          .catch(error => {
            console.error("查询错误", error);
          });
      },
      changePage(val) { //表格换页改变currengPage的值
        this.currentPage = val;
        this.checkPostList(val,true)
      },
      delPost() { //删除弹出
        this.$confirm("此操作将删除该岗位, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.postDel();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      dataFormat(row, column) { //格式化表格
        //枚举设备形式
        return this.postState[row[column.property]];
      },
      resetForm(formName) { //重置查询表单
        this.$refs["" + formName].resetFields();
        console.log(this.form.appNum)
      },
      handleCommand(val) { //更多操作按钮的切换
        if (val == "postRole") {
          this.roleMaintenance();
        }
      },
      CreatePost() { //改变创建用户的显示状态
        this.dialogOptions.isShow = true;
        // this.dialogOptions.active = 0;
      },
      modPost() { //修改岗位
        this.dialogOptionsupdatePost.isShow = true;
        this.dialogOptionsupdatePost.appNum = this.currentRow.appnum;
        this.dialogOptionsupdatePost.postNum = this.currentRow.postnum;
        this.dialogOptionsupdatePost.active = 0;
      },
      roleMaintenance() { //设置打开用户关联角色页面所需的一些数据
        this.dialogOptionsUserRole.isShow = true;
        this.dialogOptionsUserRole.currentRow = this.currentRow

      },
      postDel() { //删除岗位
        this.loading = true;
        let resBody = new postDel();
        resBody.data.AppNum = this.currentRow.appnum;
        resBody.data.PostNum = this.currentRow.postnum;
        request(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.loading = false;
              this.$message({
                type: "success",
                message: "岗位删除成功!"
              });
              this.checkPostList();
            } else {
              this.loading = false;
              this.$message({
                type: "success",
                message: "岗位删除失败!"
              });
            }
          })
          .catch(error => {
            this.loading = false;
          });
      },
      checkPostList(val=1,isPage) { //查询用户表格
        if(!isPage){
        this.currentPage = 1
        // this.form1 = Object.assign({}, this.form)
      }
        this.loading=true;
        this.tableData = [];
        this.checkedPost = false;
        let resBody = new InquirePost();
        if(this.form.appNum ===""){
          resBody.data.UserNum = this.$store.getters.UserNum
        }else{
          resBody.data.AppNum = this.form.appNum
        }
        resBody.data.PostNum = this.form.postId;
        resBody.data.PostName = this.form.postName;
        resBody.data.LegalPersonNum = this.$store.getters.LegalPersonNum;
        resBody.data.length = this.pageSize;
        resBody.data.start = (this.currentPage - 1) * this.pageSize;
        request(resBody)
          .then(response => {
            this.loading = false;
            this.tableData = response.RspInfo.pageList ||[];
            this.totalRcrdNum = response.RspInfo.recordsTotal;

          })
          .catch(error => {
            this.loading = false;
          });
      },
      handleCurrentChange(val) { //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
        this.currentRow = val[0];
        if (val.length == 1) {
          this.checkedPost = true;
        } else {
          this.checkedPost = false;
        }
      },
    }
  };

</script>


<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .el-card {
    width: 100%;
  }

  .el-form-item {
    margin-left: 30px;
  }

  .el-form-item1 {
    margin-left: 10px;
  }

  .box2-button {
    width: 80px;
  }

  .el-card {
    overflow: inherit;
  }

</style>
